﻿@page "/"

<MudLayout Class="try-mudblazor-index">
    <MudAppBar Color="Color.Transparent" Fixed="false" Elevation="0">
        <div class="brand">Try<span>MudBlazor</span></div>
        <MudSpacer />
        <MudButton Href="https://mudblazor.com/" Color="Color.Default" Size="Size.Large">MudBlazor</MudButton>
        <MudButton Href="https://github.com/MudBlazor/TryMudBlazor" Color="Color.Primary" Size="Size.Large">Source Code</MudButton>
    </MudAppBar>
    <MudMainContent>
        <MudContainer Class="my-16" MaxWidth="MaxWidth.Large">
            <MudGrid Spacing="10">
                <MudItem xs="12">
                    <div>
                        <MudText Typo="Typo.h1">
                            Try<MudText Typo="Typo.h1" Inline="true" Color="Color.Primary">MudBlazor</MudText>
                        </MudText>
                        <MudText Typo="Typo.h4" Class="mud-text-secondary ml-2 my-5">
                            A playground for <MudLink Typo="Typo.h4" Href="https://mudblazor.com" Target="_blank">MudBlazor</MudLink> @Version
                        </MudText>
                        <div class="px-2 mt-8">
                            <MudButton Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" DropShadow="false" Class="px-6" Href="/snippet">Play now</MudButton>
                        </div>
                    </div>
                </MudItem>

                <MudItem xs="12">
                    <MudText Typo="Typo.h2" Class="my-5">Smooth Coding</MudText>
                    <MudText Typo="Typo.h5" Class="mud-text-secondary">
                        Play with MudBlazor components entirely in the browser. Test and experiment anytime, anywhere.
                    </MudText>
                    <MudButton Variant="Variant.Text" Color="Color.Primary" Size="Size.Large" Class="ml-n2" Href="/snippet" EndIcon="@Icons.Material.Filled.East">Get started</MudButton>
                    <MudPaper Elevation="25" Class="rounded-lg mt-12">
                        <div class="d-flex align-center py-2 try-mudblazor-codecard rounded-t-lg">
                            <div class="flex-grow-0 px-1">
                                <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" Size="Size.Small" Class="pa-2" Disabled="true" />
                                <MudIconButton Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Class="pa-2" Disabled="true" />
                                <MudIconButton Icon="@Icons.Material.Filled.Refresh" Size="Size.Small" Class="pa-2 d-none d-sm-inline" Disabled="true" />
                            </div>
                            <div class="d-flex flex-grow-1 justify-center mx-sm-16 px-sm-16 pl-4 pr-8">
                                <MudPaper Outlined="true" Class="flex-grow-1 py-1 px-2">
                                    <MudText Align="Align.Center" Typo="Typo.body2" Style="color: var(--mud-palette-text-disabled);">try.mudblazor.com</MudText>
                                </MudPaper>
                            </div>
                            <div class="flex-grow-0 px-1 d-none d-sm-flex">
                                <MudIconButton Icon="@Icons.Material.Filled.Remove" Size="Size.Small" Class="pa-2" Disabled="true" />
                                <MudIconButton Icon="@Icons.Material.Filled.CropSquare" Size="Size.Small" Class="pa-2" Disabled="true" />
                                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" Class="pa-2" Disabled="true" />
                            </div>
                        </div>
                        <MudDivider />
                        <div class="d-flex flex-column flex-sm-row">
                            <div class="d-flex try-codeblock-editor">
                                <IndexCodeBlock />
                            </div>
                            <MudDivider Vertical="true" FlexItem="true" />
                            <div class="d-flex flex-grow-1">
                                <div class="pt-6 pb-16 px-8">
                                    <MudCard Elevation="25" Class="rounded-lg">
                                        <MudCardMedia Image="/images/door.jpg" Height="200" />
                                        <MudCardContent>
                                            <MudText Typo="Typo.h5">Old Paint</MudText>
                                            <MudText Typo="Typo.body2">Old paint found on a stone house door.</MudText>
                                            <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
                                        </MudCardContent>
                                    </MudCard>
                                </div>
                            </div>
                        </div>
                    </MudPaper>
                </MudItem>

                <MudItem xs="12" Class="my-16">
                    <MudGrid Spacing="5" Class="my-16">
                        <MudItem xs="12" sm="4">
                            <div class="d-flex justify-center">
                                <MudIcon Color="Color.Primary" Icon="@Icons.Material.Outlined.Beenhere" Class="try-index-landing-icons" Style="height: 96px; width: 96px;" />
                            </div>
                            <MudText Typo="Typo.h5" Align="Align.Center" Color="Color.Primary" Class="mt-8 mb-3" Style="font-weight:500;">Save your work</MudText>
                            <MudText Typo="Typo.h6" Align="Align.Center" Class="mud-text-secondary">
                                Save your code snippets anonymously and share the generated url with anyone.
                            </MudText>
                        </MudItem>
                        <MudItem xs="12" sm="4">
                            <div class="d-flex justify-center">
                                <MudIcon Color="Color.Primary" Icon="@Icons.Material.Outlined.Share" Class="try-index-landing-icons" Style="height: 96px; width: 96px;" />
                            </div>
                            <MudText Typo="Typo.h5" Align="Align.Center" Color="Color.Primary" Class="mt-8 mb-3" Style="font-weight:500;">Made for you</MudText>
                            <MudText Typo="Typo.h6" Align="Align.Center" Class="mud-text-secondary">
                                TryMudBlazor is here to help you, experiment, get help, and learn MudBlazor.
                            </MudText>
                        </MudItem>
                        <MudItem xs="12" sm="4">
                            <div class="d-flex justify-center">
                                <MudIcon Color="Color.Primary" Icon="@Icons.Material.Outlined.FavoriteBorder" Class="try-index-landing-icons" Style="height: 96px; width: 96px;" />
                            </div>
                            <MudText Typo="Typo.h5" Align="Align.Center" Color="Color.Primary" Class="mt-8 mb-3" Style="font-weight:500;">Share some love</MudText>
                            <MudText Typo="Typo.h6" Align="Align.Center" Class="mud-text-secondary">
                                See someone having trouble with Blazor? Help them out and send them a snippet link or work together.
                            </MudText>
                        </MudItem>
                    </MudGrid>
                </MudItem>
            </MudGrid>
        </MudContainer>

        <MudDivider Class="my-16" />

        <MudContainer>
            <MudGrid Class="try-index-footer">
                <MudItem xs="12" sm="3">
                    <div style="text-align:center">
                        <h1>Try</h1>
                        <h1 class="my-2">+</h1>
                        <h1>MudBlazor</h1>
                    </div>
                </MudItem>
                <MudItem xs="12" sm="3">
                    <MudText>Community</MudText>
                    <ul>
                        <li>
                            <MudLink Typo="Typo.body2" Href="https://discord.gg/mudblazor" Target="_blank">Discord</MudLink>
                        </li>
                        <li>
                            <MudLink Typo="Typo.body2" Href="https://github.com/MudBlazor/MudBlazor/discussions" Target="_blank">GitHub Discussions</MudLink>
                        </li>
                    </ul>
                </MudItem>
                <MudItem xs="12" sm="3">
                    <MudText>MudBlazor</MudText>
                    <ul>
                        <li>
                            <MudLink Typo="Typo.body2" Href="https://mudblazor.com/" Target="_blank">Website</MudLink>
                        </li>
                        <li>
                            <MudLink Typo="Typo.body2" Href="https://www.nuget.org/packages/MudBlazor/">Package</MudLink>
                        </li>
                    </ul>
                </MudItem>
                <MudItem xs="12" sm="3">
                    <MudText>TryMudBlazor</MudText>
                    <ul>
                        <li>
                            <MudLink Typo="Typo.body2" Href="https://github.com/MudBlazor/TryMudBlazor">Source Code</MudLink>
                        </li>
                    </ul>
                </MudItem>
            </MudGrid>
            <MudText Align="Align.Center" Typo="Typo.body2" Class="mb-8 mt-16"><MudLink Typo="Typo.body2" Href="https://github.com/MudBlazor/TryMudBlazor/blob/main/LICENSE" Target="_blank">GNU General Public License v2.0.</MudLink></MudText>
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code { 
    string Version { get { var v = typeof(MudText).Assembly.GetName().Version; return $"v{v.Major}.{v.Minor}.{v.Build}"; } } 
}